<template>
  <div>
    <el-popover
      v-model="visible"
      placement="bottom-start"
      width="500"
      trigger="click"
      popper-class="icon-picker-popover"
      :visible-arrow="false"
    >

      <el-tabs
        tab-position="left"
        style="height: 295px;"
        type="border-card"
        class="icon-picker-tabs"
      >

        <el-tab-pane label="组件图标">
          <el-scrollbar
            ref="eScrollbar"
            tag="div"
            wrap-class="el-select-dropdown__wrap"
            view-class="el-select-dropdown__list"
          >
            <div v-for="item of elementIcons" :key="item" class="icon-item" @click="handleSelectIcon('el-icon-' + item)">
              <i :class="'el-icon-' + item" />
            </div>
          </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="svg图标">
          <div v-for="item of svgIcons" :key="item" class="icon-item" @click="handleSelectIcon(item)">
            <svg-icon :icon-class="item" class-name="disabled" />
          </div>
        </el-tab-pane>

      </el-tabs>

      <div slot="reference">
        <div v-if="iconText" class="selected-icon">
          <Item :icon="iconText" />
        </div>
        <el-button class="selected-icon-button" type="small">选择图标</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
import svgIcons from './svg-icons'
import elementIcons from './element-icons'
import Item from '@/framework/layout/components/Sidebar/Item'
export default {
  name: 'IconPIcker',
  components: {
    Item
  },
  props: {
    icon: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      iconText: this.icon,
      elementIcons,
      svgIcons
    }
  },
  watch: {
    icon(newValue, oldValue) {
      this.iconText = newValue
    }
  },
  methods: {
    handleSelectIcon(item) {
      this.visible = false
      this.iconText = item
      this.$emit('update:icon', item)
      this.$emit('change', item)
    }
  }
}
</script>
<style lang="scss">
  @import '@/framework/styles/element-variables.scss';
  .icon-picker-popover{
    padding: 0 !important;

  }
   .el-popover__reference{
      display: flex;
    }
  .icon-picker-tabs .el-tabs__content{
    padding-right: 0px;;
  }
  .icon-item{
    font-size: 25px;
    display: inline-block;
    cursor:pointer;
    margin: 5px;
  }
  .icon-item :hover{
    color: #fff;
    background-color: $--color-primary;
  }
  .selected-icon{
    display: inline-block;
    font-size: 23px;
    width: 32px;
    height: 36px;
    text-align: center;
    line-height: 32px;
  }
  .selected-icon-button{
    display: inline-block;
  }
</style>
